import {
  Button,
  Card,
  Form,
  Select,
  Space,
  Spin,
  Table,
  DatePicker,
} from "@arco-design/web-react";
import styles from "./index.module.less";
import { useState } from "react";
import {
  IconDownload,
  IconRefresh,
  IconSearch,
} from "@arco-design/web-react/icon";
import Row from "@arco-design/web-react/es/Grid/row";
import Col from "@arco-design/web-react/es/Grid/col";
const { RangePicker } = DatePicker;
export default function index() {
  const handleExport = () => {
    console.log("export");
  };
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const columns = [
    {
      title: "预测时间",
      dataIndex: "predictTime",
    },
    {
      title: "实际能耗",
      dataIndex: "actualValue",
    },
    {
      title: "预测能耗",
      dataIndex: "predictedValue",
    },
    {
      title: "误差率",
      dataIndex: "errorRate",
      render: (value: number) => `${(value * 100).toFixed(2)}%`,
    },
    {
      title: "操作",
      render: (_: any, record: any) => (
        <Space>
          <Button
            type="text"
            icon={<IconDownload />}
            onClick={() => handleExport(record)}
          >
            导出
          </Button>
        </Space>
      ),
    },
  ];
  const handlePredict = () => {
    console.log(form.getFieldsValue());
  };
  const handleReset = () => {
    form.resetFields();
  };
  const handleSubmit = () => {};
  return (
    <div className={styles.container}>
      <Card>
        <div className="flex">
          <Form form={form} onSubmit={handlePredict}>
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  label="预测时间"
                  field="dateRange"
                  rules={[{ required: true }]}
                >
                  <RangePicker showTime format="YYYY-MM-DD" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="历史数据"
                  field="windowSize"
                  rules={[{ required: true }]}
                >
                  <Select
                    placeholder="请选择历史数据"
                    style={{ width: 200 }}
                    options={[
                      { label: "近24天", value: 7 },
                      { label: "近48天", value: 14 },
                      { label: "近96天", value: 30 },
                    ]}
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <Space
            direction={"vertical"}
            className={"flex justify-center mr-5"}
          >
            <Button
              loading={loading}
              type="primary"
              icon={<IconSearch />}
              onClick={handleSubmit}
            >
              预测
            </Button>
            <Button
              loading={loading}
              type="primary"
              icon={<IconRefresh />}
              onClick={handleReset}
            >
              重制
            </Button>
          </Space>
        </div>
      </Card>

      <Card className={styles.history} title="历史预测记录">
        <Table
          columns={columns}
          data={[]} // TODO: 添加实际数据
          loading={loading}
          pagination={{
            total: 0,
            pageSize: 10,
          }}
        />
      </Card>
    </div>
  );
}
